// import React from "react";
import React, { useState, useEffect } from "react";
import { Row, Col, Input, Button, message, Divider, Tooltip, Spin } from "antd";
import axios from "axios";
import servicePath from "../config/apiUrl";
import '../static/css/miQuan.scss'

export default function AddMiQuan(props) {
  const [miQuanTitle, setMiQuanTitle] = useState(""); //密圈名称：
  const [miQuanId, setMiQuanId] = useState(0); //密圈ID：
  const [spinning, setSpinning] = useState(false); // loading
  const [miQuanType, setMiQuanType] = useState(""); //密圈类别：
  const [miQuanAuthor, setMiQuanAuthor] = useState(""); //密圈博主：
  const [miQuanImgurl, setMiQuanImgurl] = useState(""); //密圈图片地址：
  const [platform, setPlatform] = useState(""); //博主平台
  const [miQuanJumpurl, setMiQuanJumpurl] = useState(""); //密圈跳转URL：
  useEffect(() => {
    //获得文章ID
    let tmpId = props.match.params.id
    if(tmpId){
      // console.log(tmpId,"tmpId");
      
      setMiQuanId(tmpId)
      getMiquanById(tmpId)
    } 
  }, []);
  const initData = () => {
    setMiQuanTitle('')
    setMiQuanType('')
    setMiQuanAuthor('')
    setMiQuanImgurl('')
    setPlatform('')
    setMiQuanJumpurl('')
  }
  const getMiquanById = id => {
    setSpinning(true)
    axios(servicePath.getMiQuanById + id, {
      withCredentials: false,
      header: { "Access-Control-Allow-Origin": "*" }
    }).then(res => {
      let miQuanInfo= res.data.data[0]
      setMiQuanTitle(miQuanInfo.miQuanTitle);
      setMiQuanType(miQuanInfo.miQuanType);
      // let html = marked(miQuanInfo.article_content);
      // setMarkdownContent(html);
      setMiQuanAuthor(miQuanInfo.miQuanAuthor);
      // let tmpInt = marked(miQuanInfo.introduce);
      setMiQuanImgurl(miQuanInfo.miQuanImgurl);
      setPlatform(miQuanInfo.platform);
      setMiQuanJumpurl(miQuanInfo.miQuanJumpurl);
      setSpinning(false)
    }).catch((err)=>{
      message.error(err.response.data.data)
      if(err.response.status === 401){
        props.history.push("/login")
      }
      setSpinning(false)
    })
  };
  const postMiQuan = ()=>{
    setSpinning(true)
    if (!miQuanTitle) {
      message.error("密圈名称不能为空")
      setSpinning(false)
      return false;
    } else if (!miQuanType) {
      message.error("密圈类别不能为空")
      setSpinning(false)
      return false;
    } else if (!miQuanAuthor) {
      message.error("密圈博主不能为空")
      setSpinning(false)
      return false;
    } else if (!miQuanImgurl) {
      message.error("密圈图片地址不能为空")
      setSpinning(false)
      return false;
    } else if (!platform) {
      message.error("博主平台不能为空")
      setSpinning(false)
      return false;
    } else if (!miQuanJumpurl) {
      message.error("密圈跳转URL不能为空")
      setSpinning(false)
      return false;
    }
    message.success("检验通过")
    let dataProps = {}; //传递到接口的参数
    dataProps.miQuanTitle = miQuanTitle;
    dataProps.miQuanType = miQuanType;
    dataProps.miQuanAuthor = miQuanAuthor;
    dataProps.miQuanImgurl = miQuanImgurl;
    dataProps.platform = platform;
    dataProps.miQuanJumpurl = miQuanJumpurl;
    // console.log(dataProps,"333333333");
    if (miQuanId === 0) {
      setSpinning(true)
      dataProps.addTime = new Date().getTime();
      // console.log("articleId=:" + articleId);
      // dataProps.view_count = Math.ceil(Math.random() * 100) + 1000;
      axios({
        method: "post",
        url: servicePath.addMiQuan,
        data: dataProps,
        withCredentials: false
      }).then(res => {
        // setArticleId(res.data.insertId);
        if (res.data.isScuccess) {
          message.success("密圈发布成功");
          props.history.push("/index/MiQuanList/")
          initData()
        } else {
          message.error(res.data.isError);
        }
        setSpinning(false)
      }).catch((err)=>{
        message.error(err.response.data.data)
        if(err.response.status === 401){
          props.history.push("/login")
        }
        setSpinning(false)
      })
    } else {
      setSpinning(true)
      dataProps.updateTime = new Date().getTime();
      dataProps.id = miQuanId;
      axios({
        method: "post",
        url: servicePath.updateMiQuan,
        data: dataProps,
        withCredentials: false
      }).then(res => {
        // setArticleId(res.data.insertId);
        if (res.data.isScuccess) {
          message.success("密圈修改成功");
          props.history.push("/index/MiQuanList/")
          initData()
        } else {
          message.error(res.data.isError);
        }
        setSpinning(false)
      }).catch((err)=>{
        message.error(err.response.data.data)
        if(err.response.status === 401){
          props.history.push("/login")
        }
        setSpinning(false)
      })
    }
    
  }
  return (
    <div className="miQuan">
      
      <Spin tip="Loading..." spinning={ spinning }>
        <Row>
          <Col span={6} push={18} className="miQuan-view">
          <div style={{ textAlign:'center',margin:'0 auto' }}>
            <img src={ miQuanImgurl } alt="Lbxin 专注于WEB和移动前端开发" style={{ width:'100%',height:'220px' }} />
            <Divider style={{color:'red',borderColor:'#000'}}>{ miQuanTitle }</Divider>
            <h4>博主：{ miQuanAuthor?miQuanAuthor:'待输入' }</h4>
            <h4>平台：
              <Tooltip placement="top" title={`跳转地址：${miQuanJumpurl?miQuanJumpurl:'暂无'}`}>
                <a href={ miQuanJumpurl } className="blue_link" target="_blank">{ platform?platform:'待输入' }</a>
              </Tooltip>
            </h4>
              <h4>类型：{ miQuanType?miQuanType:'待输入' }</h4>
          </div>
          </Col>
          <Col span={18} pull={6} className="miQuan-advice">
            <p>
              <span >名称：</span>
              <Input placeholder="密圈名称：" value={ miQuanTitle } onChange={e => { setMiQuanTitle(e.target.value); }} />
            </p>
            <p>
              <span >类别：</span>
              <Input placeholder="密圈类别：" value={ miQuanType } onChange={e => { setMiQuanType(e.target.value); }} />
            </p>
            <p>
              <span >博主：</span>
              <Input placeholder="密圈博主：" value={ miQuanAuthor } onChange={e => { setMiQuanAuthor(e.target.value); }} />
            </p>
            <p>
              <span >博主平台：</span>
              <Input placeholder="博主平台：" value={ platform } onChange={e => { setPlatform(e.target.value); }} />
            </p>
            <p>
              <span >图片地址：</span>
              <Input placeholder="密圈图片地址：" value={ miQuanImgurl } onChange={e => { setMiQuanImgurl(e.target.value); }} />
            </p>
            <p>
              <span >跳转地址：</span>
              <Input placeholder="密圈跳转URL：" value={ miQuanJumpurl } onChange={e => { setMiQuanJumpurl(e.target.value); }} />
            </p>
          </Col>
          <Button type="primary" size="large" onClick={ postMiQuan }>
            {miQuanId>0?'确定':'发布密圈'}
          </Button>
        </Row>
      </Spin>
    </div>
  )
}
